<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet"/>
    <link th:href="@{/css/my.css}" rel="stylesheet"/>

    <!--页面样式文件-->
    <link rel="stylesheet" th:href="@{/dist/css/main.css}">
    <link rel="stylesheet" th:href="@{/dist/css/media.css}">
</head>
<body class="bd-bg">
<!--右侧主体-->
<div class="Vegetable02-contentPart">
    <div class="vegetable02-main">

        <!--搜索区域-->
        <div class="row rowNew">
            <div class="col-sm-12 search-area">
                <form id="formId">
                    <div class="select-list">
                        <ul class="ulForm clearfix">
                            <li class="select-time">
                                <label>选择时间： </label>
                                <div class="fl inputTime-outer">
                                    <input type="text" class="time-input" th:value="${beginTime}" id="startTime"
                                           placeholder="开始时间"
                                           name="params[beginPlanTime]"/>
                                    <div class="icon-rili"></div>
                                </div>
                                <span>-</span>
                                <div class="fl inputTime-outer">
                                    <input type="text" class="time-input" th:value="${endTime}" id="endTime"
                                           placeholder="结束时间"
                                           name="params[endPlanTime]"/>
                                    <div class="icon-rili"></div>
                                </div>
                                <div class="btn-outer fl">
                                    <a class="btn btn-primary" onclick="reloadIt()" style="margin-left: 24px;">搜索</a>
                                </div>
                            </li>
                            <li class="btn-group">
                                <a class="thisYear btn btn-primary mlr_8">本年</a>
                                <a class="thisMonth btn btn-primary mlr_8">本月</a>
                                <a class="thisDay btn btn-primary mlr_8">本日</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>

        <!--tab区域-->
        <div class="btm">
            <div class="btm-top">
                <ul id="tabList" class="tabList clearfix">
                    <li class="item active">所有菜房</li>
                    <li class="item">菜房一</li>
                    <li class="item">菜房二</li>
                </ul>
            </div>
            <div class="btm-content">
                <div class="firstTab-content active">
                    <!--统计区域-->
                    <div class="row rowNew">
                        <div class="statistics-area02">
                            <div class="statistics-list clearfix">
                                <div class="statistics-item col-xs-6 col-sm-2 col-lg-2" th:each="kv,state:${all}">
                                    <div th:class="'main color0' + ${state.index +1} +'  '+ ${state.index == 0?'active':''}">
                                        <div class="indro" th:text="${kv.name}">共计订单</div>
                                        <div class="num" >
                                            <span th:text="${kv.value}"></span>
                                            <span th:if="${state.index ==0 }" class="unit">kg</span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="firstTab-content">
                    <!--统计区域-->
                    <div class="row rowNew">
                        <div class="statistics-area02">
                            <div class="statistics-list clearfix">

                                <div class="statistics-item col-xs-6 col-sm-2 col-lg-2" th:each="kv,state:${cf1}">
                                    <div th:class="'main color0' + ${state.index +1} +'  '+ ${state.index == 0?'active':''}">
                                        <div class="indro" th:text="${kv.name}">共计订单</div>
                                        <div class="num" >
                                            <span th:text="${kv.value}"></span>
                                            <span th:if="${state.index ==0 }" class="unit">kg</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="firstTab-content">
                    <!--统计区域-->
                    <div class="row rowNew">
                        <div class="statistics-area02">
                            <div class="statistics-list clearfix">
                                <div class="statistics-item col-xs-6 col-sm-2 col-lg-2" th:each="kv,state:${cf2}">
                                    <div th:class="'main color0' + ${state.index +1} +'  '+ ${state.index == 0?'active':''}">
                                        <div class="indro" th:text="${kv.name}">共计订单</div>
                                        <div class="num" >
                                            <span th:text="${kv.value}"></span>
                                            <span th:if="${state.index ==0 }" class="unit">kg</span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--图表区域-->
        <div class="row rowNew tab-content">
            <div class="col-sm-4 left">
                <div class="echart-item">
                    <div id="leftMain" style="width:100%;height:410px;"></div>
                </div>
            </div>
            <div class="col-sm-8 right">
                <div class="filter-btn">
                    <a class="btn " id="yearBtn">年</a>
                    <a class="btn active" id="monthBtn">月</a>
                    <a class="btn" id="dayBtn">日</a>
                </div>
                <div class="echart-item ">
                    <div id="main" style="width:100%;height:410px;"></div>
                </div>
            </div>
        </div>

    </div>
</div>


<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>

<!--echart-->
<script th:src="@{/dist/libs/echarts/dist/echarts.min.js}"></script>

<!-- 遮罩层 -->
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=3.4.0}"></script>

<script th:src="@{/ruoyi/js/ry-ui.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/js/my-common-js.js}"></script>

<script th:inline="javascript">
    var ctx = [[@{
        /}]]
        var caifangList = ['所有菜房', '菜房一', '菜房二']
        var currentSortList = ['共计订单', '直供', '内销一', '内销二', '内销三', '内销四']
        //当前菜房标识
        var currentCaiFang = 0
        //当前分类
        var currentSort = '共计订单'
        // 饼状图高亮下标
        var currentSortIndx = -1

        var timeSort = 2;//月份


        $("#tabList li").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            var index = $(this).index();
            $(".btm-content .firstTab-content").eq(index).addClass("active").siblings().removeClass("active");
            currentCaiFang = index
            currentSortIndx = -1;
            timeSort = 2;
            sortIdx = 0;
            initEchart();
            // setBarData(currentCaiFang, currentSort, 'year')
            setPieData(currentCaiFang, currentSort, 'year')
        });


        /**
         * 设置柱状图的数据(参数用于获取数据)
         * @param currentCaiFang:当前菜房
         * @param sortIdx:共计订单/直供/内销一/内销二
         * @param timeSort:年月日
         */
        function setBarData(currentCaiFang, sortIdx, timeSort, x, y) {
            // 调用方法获取数据
            var xData = ['09', '10', '11', '12', '01', '02', '03', '04', '05', '06', '07', '08'];
            var yData = [320, 220, 240, 160, 120, 204, 280, 240, 190, 110, 210, 210];

            if (x && y) {

                xData = x;
                yData = y;
            }


            var myChart = echarts.init(document.getElementById('main'));
            var option01 = {
                title: {
                    text: '蔬菜供应数量统计表',
                    x: 'center',
                    textStyle: {
                        fontSize: 32,
                        color: '#2d353e'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    textStyle: {
                        fontSize: 22
                    }
                },
                grid: {
                    top: '21%',
                    bottom: '7%',
                    left: '7%',
                    right: '5%'
                },
                xAxis: {
                    name: '',
                    nameTextStyle: {
                        color: '#a1a4a8',
                        fontSize: 20,
                    },
                    data: xData,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#f3f6fa'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#a3abb4',
                            fontSize: 20,
                        }
                    },
                },
                yAxis: {
                    name: 'kg',
                    nameTextStyle: {
                        color: '#a1a4a8',
                        fontSize: 20,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#f3f6fa'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#f3f6fa'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#a3abb4',
                            fontSize: 20,
                        }
                    },
                },
                series: {
                    name: '供应数量(kg)',
                    type: 'bar',
                    barWidth: 18,
                    emphasis: {
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#4cb3db' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#3d7ee0' // 100% 处的颜色
                            }], false)
                        }
                    },
                    itemStyle: {
                        normal: {
                            barBorderRadius: [9, 9, 0, 0],
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#60c5ff' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#428af5' // 100% 处的颜色
                            }], false)
                        }
                    },
                    data: yData
                }
            };
            myChart.setOption(option01);
        }

        // setBarData(currentCaiFang, currentSort, 'year')


        /**
         * 设置饼状图
         * @param currentCaiFang:当前菜房
         * @param sortIdx:共计订单/直供/内销一/内销二
         * @param timeSort:年月日
         */


        var myChart00 = echarts.init(document.getElementById('leftMain'));
        var option00 = {}
        var all = [[${all}]];
        var cf1 = [[${cf1}]];
        var cf2 = [[${cf2}]];

        function setPieData(currentCaiFang, sortIdx, timeSort) {
            // 调用方法获取数据
            var pieData = [
                {value: '2000', name: '直供(kg)'},
                {value: '3000', name: '内销一(kg)'},
                {value: '4000', name: '内销二(kg)'},
                {value: '1000', name: '内销三(kg)'},
                {value: '1200', name: '内销四(kg)'},
            ]

            if (currentCaiFang == 0) {
                pieData = all.slice(1, all.length);
            } else if (currentCaiFang == 1) {
                pieData = cf1.slice(1, cf1.length);
            } else if (currentCaiFang == 2) {
                pieData = cf2.slice(1, cf2.length);
            }


            option00 = {
                legend: {
                    orient: "vartical",
                    right: '4%',
                    bottom: "16%",
                    itemWidth: 20,
                    itemHeight: 15,
                    textStyle: {
                        fontSize: 16,
                        color: '#7c8b92'
                    },
                    itemGap: 15,
                    selectedMode: false
                },
                title: {
                    text: '蔬菜供应数量比例图',
                    x: 'center',
                    textStyle: {
                        fontSize: 32,
                        color: '#2d353e'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    // formatter: "{a} <br/>{b}:({d}%)"
                },
                series: {
                    name: '',
                    type: 'pie',
                    center: ['35%', '57%'],
                    radius: ['42%', '76%'],
                    color: ['#a781ff', '#5ad6ff', '#ffba60', '#749fff', '#8eff73'],
                    label: {
                        normal: {
                            position: 'inner',
                            formatter: '{d}%',
                            textStyle: {
                                fontSize: 20
                            }
                        }
                    },
                    itemStyle: { //图形样式
                        normal: {
                            borderColor: '#ffffff',
                            borderWidth: 2,
                        },
                    },
                    data: pieData
                }
            };
            myChart00.setOption(option00);
        }

        setPieData(currentCaiFang, currentSort, 'year')


        // 柱状图根据年月日切换
        $('#yearBtn').click(function () {
            timeSort = 1;
            $(this).addClass('active').siblings().removeClass('active')
            // setBarData(currentCaiFang, urrentSort, 'year')
            initEchart();
        })


        $('#monthBtn').click(function () {
            timeSort = 2;
            $(this).addClass('active').siblings().removeClass('active')
            console.log(currentSort)
            // setBarData(currentCaiFang, currentSort, 'year')
            initEchart()
        })


        $('#dayBtn').click(function () {
            timeSort = 3;
            $(this).addClass('active').siblings().removeClass('active')
            // setBarData(currentCaiFang, currentSort, 'day')
            initEchart()
        })


        // 切换"共计订单"、"直供"
        $(".statistics-list").each(function () {
            $(this).children(".statistics-item").each(function (index) {
                var _idx = index
                $(this).children(".main").eq(0).click(function () {

                    currentSort = currentSortList[_idx]

                    // 设置柱状图数据
                    // setBarData(currentCaiFang, currentSort, 'year')
                    initEchart()

                    $(this).addClass("active").parent().siblings().children(".main").removeClass("active");

                    // 饼状图高亮
                    myChart00.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: currentSortIndx
                    });
                    if (_idx > 0) {
                        currentSortIndx = _idx - 1
                    } else {
                        currentSortIndx = -1
                    }
                    myChart00.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: currentSortIndx
                    });


                    console.log(currentSortIndx)

                })
            })
        })


        //检测鼠标移入后显示之前默认高亮的那块
        myChart00.on('mouseover', function (e) {
            // 移除默认高亮
            myChart00.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: currentSortIndx
            });
        })
        //检测鼠标移出后显示之前默认高亮的那块
        myChart00.on('mouseout', function (e) {
            // 移除所有高亮
            myChart00.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: option00.series.data.length
            });
            // 高亮选中部分
            myChart00.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: currentSortIndx
            });
        });

        function reloadIt() {
            var link = ctx + "system/front_caifang/vegetableWarehouses";
            var s = $('#startTime').val();
            var e = $('#endTime').val();

            link += "?beginTime=" + s + "&endTime=" + e;
            window.location.href = link;
        }

        $('.thisYear').click(function () {
            $('#startTime').val(new Date().getFullYear() + "-01-01");
            reloadIt();
        });

        $('.thisMonth').click(function () {
            var d = new Date();
            var m = d.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            $('#startTime').val(new Date().getFullYear() + "-" + m + "-01");
            reloadIt();
        });

        $('.thisDay').click(function () {
            $('#startTime').val(dateFtt(new Date()));
            reloadIt();
        });

        function detailInfo(obj) {

            var ancestors = $(obj).attr('ancestors');
            var cfOrderFor = $(obj).attr('cfOrderFor');

            var link = ctx + 'system/front_caifang/frontOutputCf?ancestors=' + ancestors + "&cfOrderFor=" + cfOrderFor;

            var s = $('#startTime').val();
            var e = $('#endTime').val();
            link += "&beginTime=" + s + "&endTime=" + e;
            $.modal.openTab("检测列表", link);
        }

        initEchart();

        /*初始化柱状图*/
        function initEchart() {
            var url = ctx + "system/front_caifang/outputQuery";
            var data = {
                beginTime: $('#startTime').val(),
                endTime: $('#endTime').val(),
                outputType: currentSortIndx + 1,
                dataSpan: timeSort,
                cf: currentCaiFang
            };

            myPost(url, data, function (data) {
                if (data.code == 0) {
                    var x = [];
                    var y = [];
                    $(data.rows).each(function (i, e) {
                        x.push(e.x);
                        y.push(e.count);
                    });

                    console.log(x)
                    console.log(y)
                    setBarData(currentCaiFang,currentSort, timeSort, x, y);
                }

            }, function () {

            })
        }

        setFrontTimeShortcutBtns([[${beginTime}]], [[${endTime}]]);
        setTitle("菜房管理",false)
</script>
</body>

</html>
